<template>
  <div>


    <!-- vant搜索 -->
    <van-search action-text="Cancel" @search="onSearch" show-action shape="round" v-model="kw " placeholder="please enter search keywords">

      <template>
        <van-icon @click="back" style="margin-right: 5px;" size="22px"></van-icon>
      </template>



    </van-search>

    <van-tabs type="line" :border="true" line-width="13px" color="rgb(181, 79, 255)"
      title-inactive-color="rgb(132, 132, 132)" title-active-color="black" v-model="activeName">
      <van-tab title="Novel" name="a">
        <div v-show="isShow">
          <div style="display:flex; justify-content: space-between; align-items: center;">
            <p v-show="saveList.length > 0" style=" display: inline-block;font-weight: 800;font-size: 0.6rem;">
              Search history
            </p>


            <div>
              <van-icon v-show="saveList.length > 0" size="18px" name="delete"><span @click="onDel"
                  v-show="hide">编辑</span><span @click="wancheng" v-show="!hide">完成</span></van-icon>
            </div>
          </div>

          <div class="buju">
            <div v-for="(item, index) in saveList" :key="index + 'a'"><span>{{ item }}</span>
              <van-icon @click="dele(index)" v-show="!hide" size="0.5rem" name="close" color="#ccc" />
            </div>
          </div>
        </div>

      </van-tab>
      <van-tab title="Audio" name="b">内容 2</van-tab>
      <van-tab title="Comic" name="c">
        <div class="result">
          <h3>Sorry!</h3>
          <p>No results were found.</p>
        </div>

      </van-tab>
    </van-tabs>

    <!-- 搜索记录 -->


    <!-- 搜索提示 -->



  </div>


</template>
<script>

export default {
  data() {
    return {
      kw: '',
      isShow: true,
      list: [], //所有数据
      saveList: [], //搜索记录的数据
      hide: true,
      activeName: 'b',

    }
  },

  methods: {
    wancheng() {
      this.hide = true
    },

    dele(index) {

      var data = this.saveList


      this.saveList = data.reduce((a, b) => {

        if (b == data[index]) {

        } else {
          a.push(b)
        }
        console.log(a);
        return a
      }, [])
      console.log(this.saveList, '剩余结果');
      localStorage.setItem('saveList', JSON.stringify(this.saveList))


    },
    back() { //返回上一级
      window.history.back()
    },
    onSearch(val) { //点击enter和点击搜索时触发
      console.log('1111', this.saveList);




      this.$router.push({ //点击跳转到列表页，并把输入的值传过去
        path: '/login',
        query: {
          kw: val
        }
      })

      if (!this.saveList.includes(val.trim())) { //判断是否重复添加相同记录
        this.saveList.push(val) //把搜索的值添加到搜索记录
        localStorage.saveList = JSON.stringify(this.saveList)
      }

    },

    onDel() { //删除

      this.hide = false

      //    this.saveList = []
      //    localStorage.saveList = JSON.stringify(this.saveList)



    },

  },


  created() {

    let saveList = localStorage.saveList
    if (saveList) {
      this.saveList = JSON.parse(saveList)
    }


  },
  mounted() {

  },

}
</script>
<style lang="scss" scope="">
* {
  padding: 0;
  margin: 0;
}

.buju {
  width: 80vw;
  margin: auto;
  display: flex;
  justify-content: space-around;

  flex-wrap: wrap;


  span {
    font-size: 0.5rem;
    background-color: #ccc;
    padding: 4px 6px;
    border-radius: 20px;
  }
}

.result {

  width: 80vw;
  height: 100px;
  margin: auto;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  h3 {
    font-size: 0.65rem;
    width: 45vw;
    height: 30px;
  }

  p {
    font-size: 0.55rem;
    height: 30px;
  }
}
</style>